<!-- @format -->

<template>
	<div id="prient-content"  style="height:100%;position: relative;">
        <div v-if="list.length != 0" class='flex flex_wrap' style="position: relative;width: 100%;">
            <div class='card' :class='item.id == active?"actcard":""' v-for="(item,index) in list" :key="index" @click="handleActive(item.id)">
                <div class="flex align_center justify_between marbot16" >
                    <div>{{item.order_no}}</div>
                    <!-- 绿 green 灰 gray  橙 orangered -->
                    <a-tag bordered :color="item.pick_status == 0 || item.pick_status == 3?'orangered':item.pick_status == 2 || item.pick_status == 4?'gray':'green'">
                        {{item.pick_status == 0?'未开始':item.pick_status == 1?'已完成':item.pick_status == 2?'未开始':item.pick_status == 3?'进行中':'已取消'}}
                    </a-tag>
                </div>
                <div style='font-size:14px;font-weight:600;line-height:24px;margin-bottom:8px' class='ellipsis'>{{item.dept?.name}}</div>
                <div class='flex marbot16'>
                    <a-tag  color="blue" style='margin-right:8px'>{{item.transport_type == 1?'集装箱':item.transport_type == 2?'整车':'批量零散'}}</a-tag>
                    <a-tag  color="blue" style='margin-right:8px' v-if="props.type != 2">{{item.buff_type == 1?'对装':item.buff_type == 2?'非对装':'未知'}}</a-tag>
                    <a-tag  color="blue" style='margin-right:8px' v-if="props.type != 2">{{item.pick_type == 1?'自提':item.pick_type == 2?'委托派送':item.pick_type == 3?'仓储自提':'仓储委托派送'}}</a-tag>
                    <a-tag  color="blue" v-if="props.type != 2">{{item.pick_method == 1?'先打后提':item.pick_method == 2?'先提后打':'未受理'}}</a-tag>
                </div>
                <div class="flex align_center justify_between marbot16">
                    <div>共{{item.car_nos.length}}车</div>
                    <div>{{item.created_at}}</div>
                </div>
                <div class="flex align_center justify_between">
                    <div class='zuo flex_1'>总{{item.pick_weight_zong}}吨/{{item.pick_number_zong}}件</div>
                    <div class='you flex_1'>剩{{item.pick_weight_yu}}吨/{{item.pick_number_yu}}件</div>
                </div>
            </div>
        </div>
        <template v-if="list.length == 0">
            <div class="flex justify_center align_center" style="height:100%;width:100%">
                <a-empty />
            </div>
        </template>
        
	</div>
</template>

<script setup>
	import { defineProps, defineEmits, ref, reactive, onMounted, } from "vue";
	
    const emit = defineEmits(["actives"]);
    const props = defineProps({
        list:{
            type: Array,
            default:[],
        },
        active:{
            type: Number,
            default:0,
        },
        loading:{
            type:Boolean,
            default:false,
        },
        type:{
            type:Number,
            default:0,
        }
    })
    const handleActive = (index)=>{
        emit('actives',index)
    }
</script>

<style lang="less" scoped>
	.flex{
        display:flex;
    }
    .flex_wrap{
        flex-wrap:wrap
    }
    .justify_between{
        justify-content:space-between
    }
    .justify_around{
        justify-content:space-around
    }
    .justify_center{
        justify-content:center
    }
    
    .align_center{
        align-items:center;
    }
    .flex_1{
        flex:1
    }
    .width0{
        width:0
    }
    .ellipsis{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .card{
        width:calc((100% - 32px) / 3);
        padding:20px;
        border-radius:6px;
        background:rgba(31, 108, 235, 0.04);
        border:1px solid rgba(220, 220, 220, 1);
        margin-right:16px;
        margin-bottom:16px;
        height:fit-content;
        &:nth-child(3n){
            margin-right:0px;
        }
        .zuo{
            border-radius:3px;
            text-align:center;
            line-height:28px;
            color:rgba(47, 110, 204, 1);
            background:#fff;
            margin-right:10px;
            border:1px solid rgba(47, 110, 204, 1);
        }
        .you{
            border-radius:3px;
            text-align:center;
            line-height:28px;
            color:rgba(214, 135, 42, 1);
            background:#fff;
            border:1px solid rgba(214, 135, 42, 1);
        }
    }
    .actcard{
        background:linear-gradient(180deg, rgba(236, 242, 255, 1) 0%, rgba(169, 196, 255, 1) 100%);
        border:2px solid rgba(31, 108, 235, 1);
    }

    .marbot16{
        margin-bottom:16px;
    }
</style>

